Switch vs Object Literal en JavaScript
spanish 1740 Published 2020-06-23

Switch vs Object Literal en JavaScript

Photo by Fatos Bytyqi on Unsplash

Switch vs Object Literal en JavaScript

La instrucción Switch permite evaluar una expresión, buscar su respectiva coincidencia en un caso y ejecutar la declaración asociada. Es muy útil cuando tenemos diferentes casos y la instrucción If pasa a ser inadecuada. Veamos un ejemplo:


  // Ejemplo de una instruccion Switch

  let num = 2;

  switch (num) {
    case 1:
      console.log('Number ' + num);
      break;
    case 2:
      console.log('Number ' + num);
    break;
    default:
      console.log('default ' + num);
      break;
  }

Existe una alternativa al Switch como el uso del Object Literal en JavaScript. En algunos escenarios brinda un mayor rendimiento, un código más legible. El Object Literal no es más que una lista separada por comas de pares de nombre y valor dentro de llaves, los valores pueden ser propiedades y funciones. Veamos un ejemplo:


  // Ejemplo del uso de Object Literal

  let num = 2;

  let number = {
    1: 'Number 1',
    2: 'Number 2',
    test () { return 'Test number'},
  }

  console.log(number[num]);

Ventajas

  • Podemos emular la funcionalidad del Switch.
  • Aprovechar toda la potencialidad de la sintaxis del estándar ES6.
  • Código más legible.
  • Evitar la "sintaxis sugar" del Switch.
  • Switch es propenso a errores.
  • Mejor rendimiento en ejecución sobre declaraciones Switch/If, cuando el número de casos es alto.
Hagamos un ejemplo más ilustrativo:

  // Comparemos:
  // Switch
  const catalogCarByBrandFromSwitch = (brand) => {
    switch(brand) {
      case('ford'):
        return ['Explorer', 'Escape', 'Mustang', 'Move']
        break;
      case('chevrolet'):
        return ['Spark', 'Optra', 'Aveo', 'Cavalier']
        break;
      case('renault'):
        return ['Logan', 'Symbol', 'Clio', 'Megane']
        break;
      case('toyota'):
        return ['Hilux', 'Corolla', 'Camry', 'Prius']
        break;
    }
  };

  catalogCarByBrandFromSwitch('ford'); // ["Explorer", "Escape", "Mustang", "Move"]

  // Object Literal
  const catalogCarByBrandFromObjectLiteral = (brand) => ({
    'ford': ['Explorer', 'Escape', 'Mustang', 'Move'],
    'chevrolet': ['Spark', 'Optra', 'Aveo', 'Cavalier'],
    'renault': ['Logan', 'Symbol', 'Clio', 'Megane'],
    'toyota': ['Hilux', 'Corolla', 'Camry', 'Prius']
  })[brand];

  catalogCarByBrandFromObjectLiteral('ford'); // ["Explorer", "Escape", "Mustang", "Move"]

En Conclusión

La instrucción Switch es usada en muchos lenguajes, al igual que en JavaScript. Su uso en algunos casos puede traer algunas desventajas. En JavaScript se cuenta como alternativa el uso del Object Literal. Esto no quiere decir que el Switch no tenga utilidad. Solo que su implementación no es favorable para todos los escenarios. Ya queda a discreción del programador cuando es de utilidad su uso.

Tags:
Switch Object Literal JavaScript ES6
If you like me! Invite me a
Buy me a coffeeBuy me a coffee